<!--
 * @Descripttion: 描述
 * @Author: 刘黎
 * @Date: 2024-06-27 19:40:48
 * @LastEditors: 刘黎
 * @LastEditTime: 2024-08-16 19:41:19
-->
<!-- 新增好友 -->
<template>
  <div class="apption">
    <!-- 标题 -->
    <div class="pageTitle">订单管理</div>
    <div class="topBox">
      <!-- 订单状态((0:代付款,1:待发货,2:已发货,3:已完成,4:已取消,5:售后待审核,6:售后已审核,7:待退款,8:售后完成,9:售后已驳回))  -->
      <el-tabs v-model="prop.status" class="demo-tabs" @tab-click="init()">
        <el-tab-pane label="全部" name=""></el-tab-pane>
        <el-tab-pane label="代付款" name="0"></el-tab-pane>
        <el-tab-pane label="待发货" name="1"></el-tab-pane>
        <el-tab-pane label="已发货" name="2"></el-tab-pane>
        <el-tab-pane label="已完成" name="3"></el-tab-pane>
        <el-tab-pane label="已取消" name="4"></el-tab-pane>
        <el-tab-pane label="售后待审核" name="5"></el-tab-pane>
        <el-tab-pane label="售后已审核" name="6"></el-tab-pane>
        <el-tab-pane label="待退款" name="7"></el-tab-pane>
        <el-tab-pane label="售后完成" name="8"></el-tab-pane>
        <el-tab-pane label="售后已驳回" name="9"></el-tab-pane>
      </el-tabs>
      <div class="searchTop">
        <div class="left">
          <el-form :inline="true" :model="prop" class="demo-form-inline" label-width="100px">
            <el-form-item label="订单编号:">
              <el-input v-model="prop.sn" placeholder="请输入订单编号" />
            </el-form-item>
            <el-form-item label="收件人:">
              <el-input v-model="prop.name" placeholder="请输入收件人" />
            </el-form-item>
            <el-form-item label="选择下单时间:">
              <el-date-picker
                v-model="prop.create_time"
                type="datetime"
                placeholder="选择时间"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 180px;"
              />
            </el-form-item>
            <el-form-item label="联系电话:">
              <el-input v-model="prop.phone" placeholder="请输入联系电话" />
            </el-form-item>
            <el-form-item label="选择经销商:">
              <el-select v-model="prop.user_id" clearable placeholder="请选择任务状态" style="min-width: 180px;">
                <el-option v-for="list,index of prop.userOption" :key="index"
                  :label="list.name"
                  :value="list.id"/>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="right">
          <el-button type="primary" @click="init">查询</el-button>
          <el-button type="success" @click="resetClick">重置</el-button>
          <el-button type="success" @click="exportClick">导出订单</el-button>
        </div>
      </div>
    </div>
    <div class="tableClass">
      <el-table :data="tableData" v-loading="loading" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="sn" label="订单编号" />
        <el-table-column prop="name" label="收件人" />
        <el-table-column label="商品图片">
          <template #default="scope">
            <el-image :src="scope.row.goods_logo" style="width: 45px;height: 45px;"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="商品状态">
          <template #default="scope">
            <template v-if="scope.row.status===0">代付款</template>
            <template v-if="scope.row.status===1">待发货</template>
            <template v-if="scope.row.status===2">已发货</template>
            <template v-if="scope.row.status===3">已完成</template>
            <template v-if="scope.row.status===4">已取消</template>
            <template v-if="scope.row.status===5">售后待审核</template>
            <template v-if="scope.row.status===6">售后已审核</template>
            <template v-if="scope.row.status===7">待退款</template>
            <template v-if="scope.row.status===8">售后完成</template>
            <template v-if="scope.row.status===9">售后已驳回</template>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="area" label="发货地址">
          <template #default="scope">
            {{ scope.row.area }}{{ scope.row.address }}
          </template>
        </el-table-column>
        <el-table-column prop="user.name" label="经销商" />
        <el-table-column prop="update_time" label="下单时间" />
        <el-table-column prop="" label="经销商等级">
          <template #default="scope">
            <template v-if="scope.row.user.level===0">无等级</template>
            <template v-if="scope.row.user.level===1">分公司</template>
            <template v-if="scope.row.user.level===2">大批发</template>
            <template v-if="scope.row.user.level===3">中批发</template>
            <template v-if="scope.row.user.level===4">小批发</template>
            <template v-if="scope.row.user.level===5">团长</template>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <!-- <el-button type="danger" size="small" @click="deleteClick(scope.row)">删除</el-button>
            <el-button type="primary" size="small" @click="editClick(scope.row)">编辑</el-button> -->
            <el-button type="primary" size="small" @click="moreClick(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="timedPagination">
      <el-pagination
        v-model:current-page="prop.page"
        v-model:page-size="prop.limit"
        :total="prop.total"
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!-- 新增or编辑分类 -->
    <el-dialog
      v-model="dialogVisible"
      width="1200"
      :before-close="dialogClose"
      title="订单详情"
      top="3vh"
      :close-on-click-modal="false"
      class="goodsDialog"
    >
      <div v-if="detailData" class="dialogContent">
        <div class="goodsMore">
          <el-image :src="detailData.goods_logo"></el-image>
          <div class="right">
            <p class="name">{{ detailData.goods_title }}</p>
            <div class="formText">
              <span>商品规格: {{ detailData.sku_title }}</span>
              <span>收货人: {{ detailData.name }}</span>
              <span>联系电话: {{ detailData.phone }}</span>
              <span>下单时间: {{ detailData.create_time }}</span>
              <span>收货地址: {{ detailData.area }}{{ detailData.address }}</span>
              <span>价格: ￥{{ detailData.price }}</span>
              <span>订单状态: {{ detailData.status }}</span>
              <span>订单编号: {{ detailData.sn }}</span>
              <span>经销商: {{ detailData.user.name }}</span>
            </div>
          </div>
        </div>
        <div class="information">
          <el-form :inline="true" :model="formProp" class="demo-form-inline" label-width="100px">
            <el-form-item label="配送方式:">
              <el-input v-model="formProp.deliver_type" placeholder="输入配送方式" />
            </el-form-item>
            <el-form-item label="物流公司:">
              <el-input v-model="formProp.deliver_company" placeholder="输入物流公司" />
            </el-form-item>
            <el-form-item label="选择发货时间:">
              <el-date-picker
                  v-model="formProp.deliver_time"
                  type="datetime"
                  placeholder="选择时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 180px;"
                />
            </el-form-item>
            <el-form-item label="商品状态:">
              <el-select v-model="formProp.status" clearable placeholder="请选择任务状态" style="min-width: 180px;">
                <el-option label="代付款" value="0"></el-option>
                <el-option label="待发货" value="1"></el-option>
                <el-option label="已发货" value="2"></el-option>
                <el-option label="已完成" value="3"></el-option>
                <el-option label="已取消" value="4"></el-option>
                <el-option label="售后待审核" value="5"></el-option>
                <el-option label="售后已审核" value="6"></el-option>
                <el-option label="待退款" value="7"></el-option>
                <el-option label="售后完成" value="8"></el-option>
                <el-option label="售后已驳回" value="9"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="运单号:">
              <el-input v-model="formProp.deliver_sn" placeholder="请输入运单号" />
            </el-form-item>
          </el-form>
          <el-button class="saveBut" :loading="loading" type="success" @click="saveFun()">保存</el-button>
        </div>
        <div v-if="logisticsData" class="logisticsList">
          <div v-for="list,index of logisticsData" :key="index" class="list">
            <span class="time">{{ list.ftime }}:</span>
            <p>{{ list.context }}</p>
          </div>
          <div class="laiyuan">
            <span>信息来源：{{ formProp.deliver_company }}</span>
            <span>运单号: {{ formProp.deliver_sn }}</span>
          </div>
        </div>
        <div v-if="afterSalesData" class="afterSalesBox">
          <div class="title">售后处理</div>
          <el-table :data="afterSalesData" v-loading="loading" border style="width: 100%">
            <el-table-column prop="goods_title" label="商品名称" />
            <el-table-column prop="user_name" label="申请经销商" />
            <el-table-column label="商品状态">
              <template #default="scope">
                <template v-if="scope.row.status===0">待审核</template>
                <template v-if="scope.row.status===1">通过</template>
                <template v-if="scope.row.status===2">驳回</template>
              </template>
            </el-table-column>
            <el-table-column label="售后状态">
              <template #default="scope">
                <!-- 退款方式(1:仅退款,2:退货退款,3:补发,4:补偿,5:维修/换货) -->
                <template v-if="scope.row.type===1">仅退款</template>
                <template v-if="scope.row.type===2">退货退款</template>
                <template v-if="scope.row.type===3">补发</template>
                <template v-if="scope.row.type===4">补偿</template>
                <template v-if="scope.row.type===5">维修/换货</template>
              </template>
            </el-table-column>
            <el-table-column prop="lx_name" label="售后联系人电话" />
            <el-table-column prop="address" label="发货地址" />
            <el-table-column prop="remark" label="申请原因" />
            <el-table-column prop="freight" label="申请退运费" />
            <el-table-column prop="price" label="申请退款" />
            <el-table-column label="操作" width="300">
              <template #default="scope">
                <el-button type="primary" size="small" @click="saleExamineClick(scope.row)">售后审核</el-button>
                <el-button type="primary" size="small" @click="scheduleClick(scope.row)">更新进度</el-button>
                <el-button type="primary" size="small" @click="messageClick(scope.row)">查看留言</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <!-- <el-button :loading="loading" type="primary" @click="saveFun()">保存</el-button> -->
        </div>
      </template>
    </el-dialog>
    <!-- 售后审核 -->
    <el-dialog
      v-model="saleDialogVisible"
      width="600"
      :before-close="dialogClose2"
      title="售后审核"
      top="3vh"
      class="goodsDialog"
    >
      <div class="dialogContent">
        <div class="title">此订单经销商发起售后申请!</div>
        <el-form :inline="true" :model="saleFormProp" class="demo-form-inline" label-width="100px">
          <el-form-item label="商品名称:">
            {{ saleFormProp.goods_title }}
          </el-form-item>
          <el-form-item label="申请数量:">
            <el-input v-model="saleFormProp.num" placeholder="输入申请数量" />
          </el-form-item>
          <el-form-item label="申请运费金额:">
            <el-input v-model="saleFormProp.freight" placeholder="输入申请运费金额" />
          </el-form-item>
          <el-form-item label="申请退款金额:">
            <el-input v-model="saleFormProp.price" placeholder="输入申请退款金额" />
          </el-form-item>
          <el-form-item label="售后类型:">
            <template v-if="saleFormProp.type===1">仅退款</template>
            <template v-if="saleFormProp.type===2">退货退款</template>
            <template v-if="saleFormProp.type===3">补发</template>
            <template v-if="saleFormProp.type===4">补偿</template>
            <template v-if="saleFormProp.type===5">维修/换货</template>
          </el-form-item>
          <el-form-item label="售后原因:">
            {{ saleFormProp.remark }}
          </el-form-item>
          <el-form-item label="售后凭证:">
            <el-image :src="saleFormProp.voucher" :preview-src-list="[saleFormProp.voucher]" fit="cover" style="width: 100px; height: 100px"></el-image>
          </el-form-item>
          <el-form-item label="申请时间:">
            {{ saleFormProp.create_time }}
          </el-form-item>
          <el-form-item label="审核意见:">
            <el-input v-model="saleFormProp.opinion" type="textarea" placeholder="输入审核意见" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="loading" type="primary" @click="jujueFun()">拒绝</el-button>
          <el-button :loading="loading" type="success" @click="tongguoFun()">通过</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 更新进度 -->
    <el-dialog
      v-model="scheduleDialogVisible"
      width="600"
      :before-close="dialogClose3"
      title="售后更新进度"
      top="3vh"
      class="goodsDialog"
    >
      <div class="dialogContent">
        <div class="title">售后更新查看：</div>
        <el-timeline style="max-width: 600px">
          <el-timeline-item
            v-for="(activity, index) in scheduleDialogVisibleData"
            :key="index"
            :timestamp="activity.create_time"
          >
            {{ activity.remark }}
          </el-timeline-item>
        </el-timeline>
        <el-form class="demo-form-inline">
          <el-form-item label="更新售后进度：">
            <el-input v-model="scheduleDialogVisibleDataRemark" type="textarea" style="width:300px" placeholder="输入意见" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="loading" type="primary" @click="gengxinFun()">更新售后进度</el-button>
          <el-button :loading="loading" type="success" @click="jieshuFun()">已完成结束售后</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 查看留言 -->
    <el-dialog
      v-model="messageDialogVisible"
      width="600"
      :before-close="dialogClose4"
      title="查看留言"
      top="3vh"
      class="goodsDialog"
    >
      <div class="dialogContent">
        <div class="messageBox">
          <div class="chatBox">
            <div v-for="list,index of msgListData" :key="index" class="chatLine">
              <div v-if="list.type===2"  class="leftBox">
                <div class="pic"><el-image :src="list.admin_img" /></div>
                <div class="contText">
                  <p class="name">{{ list.name }} {{ list.create_time }}</p>
                  <div class="font">{{ list.content }}</div>
                </div>
              </div>
              <div v-if="list.type===1" class="rightBox">
                <div class="contText">
                  <p class="name">{{ list.create_time }} {{ list.name }}</p>
                  <div class="font">{{ list.content }}</div>
                </div>
                <div class="pic"><el-image :src="list.admin_img"></el-image></div>
              </div>
            </div>
          </div>
          <div class="chatDown">
            <div class="sending">
              <span>消息留言</span>
              <el-input v-model="messageProp.content" :rows="2" type="textarea" class="inputContent" placeholder="请输入消息留言" />
              <el-button :loading="loading" type="success" @click="sendingFun()">发送</el-button>
            </div>
            <elUploadOptionMultiple :fileUploadList="messageProp.img" @getImagesFun="sendingImagesFun" />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>


<script setup>
import { computed,ref,onMounted } from 'vue'
import { useChatInfoStore, useJobIDStore } from '@/store/index.js'
import { ElMessageBox, ElMessage } from 'element-plus'
import { postApi } from "@/api/api.js"
import elUploadOptionMultiple from '@/components/elUploadOptionMultiple.vue';
import moment from 'moment'
let prop = ref({
  sn: '',
  name: '',
  phone: '',
  status: '',
  create_time: '',
  user_id: '',
  userOption: [],
  page: 1,
  limit: 10,
  total: ''
})
let loading = ref(false)
let tableData = ref([])

// 查询商品
function init() {
  loading.value = true
  let obj = {
    sn: prop.value.sn,
    name: prop.value.name,
    phone: prop.value.phone,
    status: prop.value.status,
    create_time: prop.value.create_time,
    user_id: prop.value.user_id,
    page: prop.value.page,
    limit: prop.value.limit
  }
  postApi('/mall.order/index', obj).then(res => {
    loading.value = false
    tableData.value = res.data
    prop.value.total = res.count
  }).catch(err => {
    loading.value = false
  })
}
function resetClick() { // 重置
  prop.value = {
    sn: '',
    name: '',
    phone: '',
    status: '',
    create_time: '',
    user_id: '',
    page: 1,
  }
  init()
}
function handleCurrentChange(val){
  prop.value.page = val
  init()
}

// 详情
let dialogVisible = ref(false)
let formProp = ref({
  id: '',
  deliver_type: '',
  deliver_company: '',
  deliver_time: '',
  deliver_sn: '',
  status: ''
})

// 订单详情
let detailData=ref('')
function moreClick(row) {
  dialogVisible.value = true
  postApi('/mall.order/detail',{id: row.id}).then(res => {
    if(res.code === 1){
      detailData.value = res.data
      formProp.value = {
        id: res.data.id,
        deliver_type: res.data.deliver_type,
        deliver_company: res.data.deliver_company,
        deliver_time: res.data.deliver_time,
        deliver_sn: res.data.deliver_sn,
        status: res.data.status + ''
      }
      logisticsFun()
      afterSalesFun()
    }
  }).catch(err => {
  })
}
// 物流详情
let logisticsData = ref('')
function logisticsFun() {
  postApi('/mall.order/logistics',{id: detailData.value.id}).then(res => {
    if(res.code === 1){
      logisticsData.value = res.data
    }
    if(res.code === 0){
      logisticsData.value = ''
    }
  }).catch(err => {
  })
}
// 售后详情
let afterSalesData = ref('')
let saleFormProp = ref('')
function afterSalesFun() {
  postApi('/mall.afterSales/index',{order_id: formProp.value.id}).then(res => {
    if(res.code === 1){
      afterSalesData.value = res.data
    }
    if(res.code === 0){
      afterSalesData.value = ''
    }
  }).catch(err => {
  })
}
// 售后审核
let saleDialogVisible = ref(false)
function saleExamineClick(row) {
  saleFormProp.value = row
  saleFormProp.value.opinion = '' // 审核意见
  saleFormProp.value.status = '' // 审核状态(1:通过,2:驳回)
  saleDialogVisible.value = true
}
function jujueFun() {
  loading.value = true
  let obj = {
    id: saleFormProp.value.id,
    num: saleFormProp.value.num,
    freight: saleFormProp.value.freight,
    price: saleFormProp.value.price,
    opinion: saleFormProp.value.opinion,
    status: 2
  }
  postApi('/mall.afterSales/check', obj).then(res => {
    if(res.code === 1){
      loading.value = false
      ElMessage({message: "操作成功",type: 'success'})
      saleDialogVisible.value = false
      afterSalesFun()
    }
  }).catch(err => {
    loading.value = false
  })
}
function tongguoFun() {
  loading.value = true
  let obj = {
    id: saleFormProp.value.id,
    num: saleFormProp.value.num,
    freight: saleFormProp.value.freight,
    price: saleFormProp.value.price,
    opinion: saleFormProp.value.opinion,
    status: 1
  }
  postApi('/mall.afterSales/check', obj).then(res => {
    if(res.code === 1){
      loading.value = false
      ElMessage({message: "操作成功",type: 'success'})
      saleDialogVisible.value = false
      afterSalesFun()
    }
  }).catch(err => {
    loading.value = false
  })
}

// 保存
function saveFun() {
  loading.value = true
  postApi('/mall.order/save', formProp.value).then(res => {
    if(res.code === 1){
      ElMessage({message: "操作成功",type: 'success'})
      logisticsFun()
    }
    loading.value = false
  }).catch(err => {
    loading.value = false
  })
}
// 售后进度
let scheduleDialogVisible = ref(false)
let scheduleDialogVisibleData = ref([])
let scheduleDialogVisibleDataId = ref('')
let scheduleDialogVisibleDataRemark = ref('')
function scheduleClick(row) {
  scheduleDialogVisibleDataId.value = row.id
  scheduleDialogVisible.value = true
  scheduleDialogVisibleDataRemark.value = ''
  postApi('/mall.afterSales/recordList',{id: row.id}).then(res => {
    if(res.code === 1){
      scheduleDialogVisibleData.value = res.data
    }
  }).catch(err => {
  })
}
function gengxinFun(params) {
  loading.value = true
  let obj = {
    id: scheduleDialogVisibleDataId.value,
    remark: scheduleDialogVisibleDataRemark.value
  }
  postApi('/mall.afterSales/saveRecord', obj).then(res => {
    if(res.code === 1){
      loading.value = false
      ElMessage({message: "操作成功",type: 'success'})
      scheduleDialogVisible.value = false
      afterSalesFun()
    }
  }).catch(err => {
    loading.value = false
  })
}
function jieshuFun() {
  loading.value = true
  let obj = {
    id: scheduleDialogVisibleDataId.value
  }
  postApi('/mall.afterSales/complete', obj).then(res => {
    if(res.code === 1){
      loading.value = false
      ElMessage({message: "操作成功",type: 'success'})
      scheduleDialogVisible.value = false
      afterSalesFun()
    }
  }).catch(err => {
    loading.value = false
  })
}
// 留言
let messageDialogVisible = ref(false)
let msgListData = ref([])
let messageProp = ref({
  after_id: '',
  content: '',
  img: ''
})
function messageClick(row) {
  messageDialogVisible.value = true
  messageProp.value.after_id = row.id
  messageInit()
}
function messageInit() {
  loading.value = true
  postApi('/mall.afterSales/msgList', { after_id: messageProp.value.after_id }).then(res => {
    if(res.code === 1){
      loading.value = false
      msgListData.value = res.data
    }
  }).catch(err => {
    loading.value = false
  })
}
function sendingImagesFun(row) {
  messageProp.value.img = row
}
function sendingFun() {
  loading.value = true
  postApi('/mall.afterSales/addMsg', {
    after_id: messageProp.value.after_id,
    content: messageProp.value.content,
    img: messageProp.value.img ? messageProp.value.img[0].url : ''
  }).then(res => {
    if(res.code === 1){
      loading.value = false
      messageProp.value.content = ''
      messageProp.value.img = ''
      messageInit()
    }
  }).catch(err => {
    loading.value = false
  })
}

// 关闭弹框
function dialogClose() {
  dialogVisible.value = false
}
function dialogClose2() {
  saleDialogVisible.value = false
}
function dialogClose3() {
  scheduleDialogVisible.value = false
}
function dialogClose4() {
  messageDialogVisible.value = false
}
function exportClick() {
  alert('等待接口')
}

onMounted(()=>{
  init()
  postApi('/agent.user/index').then(res => {
    if(res.code === 1){
      prop.value.userOption = res.data
    }
  }).catch(err => {
  })
})
</script>

<style lang="scss" scoped>
.apption{
  padding: 20px;
  height: 100vh;
  .topBox{
    position: relative;
    background-color: #fff;
    border-radius: 12px;
    padding: 20px 20px 10px 20px;
    margin: 20px 0;
    .searchTop{
      display: flex;
      justify-content: space-between;
      .left{
        width: calc(100% - 260px);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }
      .right{
        width: 260px;
      }
    }
  }
  .topBut{
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 30px;
    z-index: 9;
  }
  .classOption{
    display: flex;
    justify-content: space-between;
    .oneClass{
      width: 32%;
      padding: 10px 16px;
      background: #FFFFFF;
      border-radius: 5rpx 5rpx 5rpx 5rpx;
      box-sizing: border-box;
    }
    .twoClass{
      width: 32%;
      padding: 10px 16px;
      background: #FFFFFF;
      border-radius: 5rpx 5rpx 5rpx 5rpx;
      box-sizing: border-box;
    }
    .threeClass{
      width: 32%;
      padding: 10px 16px;
      background: #FFFFFF;
      border-radius: 5rpx 5rpx 5rpx 5rpx;
      box-sizing: border-box;
    }
    .list{
      cursor: pointer;
      padding: 0 13px;
      margin-bottom: 8px;
      height: 36px;
      background: #F6F6F6;
      border-radius: 4px 4px 4px 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-icon{
        margin-left: 4px;
      }
      .deleteIco{
        cursor: pointer;
        margin-right: 4px;
      }
    }
    .active{
      background: #000000;
      border-radius: 4px 4px 4px 4px;
      color: #FFFFFF;
      .el-icon{
        color: #FFFFFF;
      }
      .deleteIco{
        color: #FFFFFF;
      }
    }
    .title{
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 14px;
      color: #BA9763;
      .el-icon{
        width: 36px;
        height: 36px;
        background: #F6F6F6;
        border-radius: 5px 5px 5px 5px;
        color: #666;
        font-size: 16px;
        margin-right: 4px;
      }
    }
    .addBut{
      height: 36px;
      line-height: 36px;
      text-align: center;
      display: block;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #F6F6F6;
      font-weight: 400;
      font-size: 14px;
      color: #000000;
    }
  }
  .pageTitle{
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 16px;
    color: rgb(16, 16, 16);
  }
  .tableClass{
    margin-bottom: 20px;
  }
}
::v-deep .goodsDialog{
  background: rgba(245,245,245,1)!important;
}
.dialogContent{
  background: rgba(245,245,245,1)!important;
  ::v-deep .el-form-item__content{
    width: 190px;
  }
  .title{
    margin-bottom: 20px;
  }
  .goodsMore{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 5px;
    .el-image{
      width: 160px;
      height: 160px;
    }
    .right{
      width: calc(100% - 180px);
      .name{
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: bold;
      }
      .formText{
        span{
          padding-right: 30px;
          margin-top: 10px;
          min-width: 180px;
          display: inline-block;
        }
      }
    }
  }
  .information{
    position: relative;
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 5px;
    .saveBut{
      position: absolute;
      right: 20px;
      bottom: 20px;
    }
  }
  .logisticsList{
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 5px;
    .list{
      margin-bottom: 10px;
      display: flex;
      line-height: 18px;
      .time{
        margin-right: 10px;
        text-align: right;
        display: inline-block;
        width: 160px;
      }
      p{
        width: calc(100% - 170px);
      }
    }
    .laiyuan{
      padding: 10px;
      background: rgba(230,230,230,1);
      text-align: center;
      span{
        margin-right: 20px;
      }
    }
  }
}
.messageBox{
  padding: 20px;
  background: #fff;
  font-size: 12px;
  .chatBox{
    height: 360px;
    overflow: auto;
    .chatLine{
      margin-bottom: 20px;
    }
  }
  .leftBox{
    display: flex;
    align-items: self-start;
    .pic{
      margin-right: 10px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      .el-image{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .contText{
      width: calc(80% - 70px);
      .name{
        margin-bottom: 10px;
        color: #999;
        font-size: 10px;
      }
    }
  }
  .rightBox{
    display: flex;
    align-items: self-start;
    justify-content: flex-end;
    .pic{
      margin-left: 10px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      .el-image{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .contText{
      width: calc(80% - 70px);
      text-align: right;
      .name{
        margin-bottom: 10px;
        color: #999;
        font-size: 10px;
      }
    }
  }
  .chatDown{ 
    padding-top: 20px;
    .sending{
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      .inputContent{
        width: 70%;
      }
    }
  }
}
</style>
